<template>
  <div class="p-8">
    <h1 class="text-2xl font-bold mb-8">Stepper Component</h1>
    <Stepper :steps="steps" />

    <div class="mt-8 flex gap-4">
      <button
        @click="goToPrevStep"
        class="px-4 py-2 bg-gray-200 rounded disabled:opacity-50"
        :disabled="currentStepIndex === 0"
      >
        Previous
      </button>
      <button
        @click="goToNextStep"
        class="px-4 py-2 bg-yellow-400 text-white rounded disabled:opacity-50"
        :disabled="currentStepIndex === steps.length - 1"
      >
        Next
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import Stepper, { Step, StepStatus } from './Stepper.vue'

// Define the steps
const stepsData = [
  { label: 'User information' },
  { label: 'Supplier application' },
  { label: 'Application approved' },
]

// Track the current step index
const currentStepIndex = ref(1) // Start at the second step (index 1)

// Compute the steps with their statuses
const steps = computed<Step[]>(() => {
  return stepsData.map((step, index) => {
    let status: StepStatus

    if (index < currentStepIndex.value) {
      status = 'completed'
    } else if (index === currentStepIndex.value) {
      status = 'current'
    } else {
      status = 'upcoming'
    }

    return {
      label: step.label,
      status,
    }
  })
})

// Navigation functions
const goToNextStep = () => {
  if (currentStepIndex.value < steps.value.length - 1) {
    currentStepIndex.value++
  }
}

const goToPrevStep = () => {
  if (currentStepIndex.value > 0) {
    currentStepIndex.value--
  }
}
</script>
